<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并</title>
		<style>
			div#parent{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 上框 加外边距 */
				margin-bottom: 90px;
			}
			div#son{
				width: 100px;
				height: 100px;
				border: 1px soild red;
				/* 下框 加外边距 */
				margin-top: 100px;
			}
			/* ----------外边距垂直合并问题：建议：加横向，不要加纵向
			                                方案：去掉一个最小值，加内边距
			 -----------------*/
			 div#parent{
			 	width: 300px;
			 	height: 300px;
			 	border: 1px solid red;
			 	/* 上外边距 40px */
			 	margin-bottom: 40px;
			 }
			 div#son{
			 	width: 100px;
			 	height: 100px;
			 	border: 1px soild red;
				background-color: #00ff00;
			 	/* 上外边距 100px */
			 	margin-top: 10px;
			}
			/* --【内部】？？-- */
		</style>
	</head>
	<body>
		<div id="parent"></div>
		<div id="son"></div>
	</body>
</html>